<!-- 首页 -->
<template>
	<view class="container">
		<TopNav title="支付宝到账"></TopNav>
		<view class="card radius">
			<view class="form-item">
				<text class="form-item-title">真实姓名</text>
				<u-input placeholder="请输入真实姓名" border="none" inputAlign="right"
					form-item-placeholder="form-item-placeholder" v-model="form.realname" readonly></u-input>
			</view>
			<view class="form-item">
				<text class="form-item-title">身份证号码</text>
				<u-input placeholder="请输入身份证号码" border="none" inputAlign="right"
					form-item-placeholder="form-item-placeholder" maxlength="18" v-model="form.idcard" readonly></u-input>
			</view>
			<view class="form-item">
				<text class="form-item-title">支付宝绑定手机号</text>
				<u-input placeholder="输入绑定手机号" border="none" inputAlign="right"
					form-item-placeholder="form-item-placeholder" maxlength="11" v-model="form.mobile"></u-input>
			</view>
			<view class="form-item">
				<text class="form-item-title">支付宝账号</text>
				<u-input placeholder="请输入支付宝账号" border="none" inputAlign="right"
					form-item-placeholder="form-item-placeholder" v-model="form.account"></u-input>
			</view>
		</view>
		<view class="m-t16">
			<text class="text-gray f-s14">注意：请确保填写的支付宝账号实名认证的姓名和平台实名认证的姓名一致，否则将无法正常收到款项。</text>
		</view>
		<view class="fixed-bottom bg-white full-width p-lr16">
			<view class="self-btn full-width" hover-class="pressed" @click="handleSubmit">
				<text>确认</text>
			</view>
		</view>
		<Toast></Toast>
	</view>
</template>

<script>
	import {
		aliBind,
		withdrawAccount
	} from "@/api/mine/pay.js"
	export default {
		name: "",
		data() {
			return {
				rawData: {},
				form: {
					id: '',
					realname: '',
					mobile: '',
					account: '',
					idcard: '',
				}
			}
		},
		onLoad() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				withdrawAccount().then(res => {
					let {
						data: {
							ali,
							technician_identity
						}
					} = res
					if(ali){
						this.rawData = ali ?? {}
						for (let key in this.form) {
							this.form[key] = this.rawData[key] ?? ''
						}
					}else{
						this.form.realname = technician_identity?.realname ?? ''
						this.form.idcard = technician_identity?.cardsn ?? ''
					}
					
				})
			},
			handleSubmit() {
				if (!this.validateForm(this.form)) return
				// 检测数据是否有变化
				let isChange = false
				for (let key in this.form) {
					if (this.form[key] !== this.rawData[key]) {
						isChange = true
						break
					}
				}
				if (isChange) {
					this.$modal.loading("正在处理").then(res => {
						aliBind(this.form).then(res => {
							this.$modal.closeLoading()
							this.$toast(res.msg).then(() => {
								uni.$emit('accountSelect', {
									...this.form,
									type: 'ali',
									typeName: '支付宝'
								})
								this.$tab.navigateBack()
							})
						}).catch(() => {
							this.$modal.closeLoading()
						})
					})
				} else {
					uni.$emit('accountSelect', {
						...this.form,
						type: 'ali',
						typeName: '支付宝'
					})
					this.$tab.navigateBack()
				}
			},
			validateForm(form) {
				// 校验真实姓名
				if (!form.realname) {
					this.$toast('请输入真实姓名');
					return false;
				} else {
					const chineseRegex = /^[\u4e00-\u9fa5]+$/;
					if (!chineseRegex.test(form.realname)) {
						this.$toast('请输入真实姓名');
						return false;
					}
				}

				// 校验身份证号
				if (!form.idcard) {
					this.$toast('请输入身份证号');
					return false;
				} else {
					const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
					if (!idCardRegex.test(form.idcard)) {
						this.$toast('身份证号格式不正确');
						return false;
					}
				}

				// 校验手机号
				if (!form.mobile) {
					this.$toast('请输入手机号');
					return false;
				} else {
					const mobile = /^1[3456789]\d{9}$/;
					if (!mobile.test(form.mobile)) {
						this.$toast('手机号格式不正确');
						return false;
					}
				}

				// 校验支付宝账号
				if (!form.account) {
					this.$toast('请输入支付宝账号');
					return false;
				}

				// 所有校验通过
				return true;
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 32rpx 24rpx;

		.card {
			background-color: #fff;

			.form-item {
				padding: 34rpx 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.form-item-title {
					font-weight: 400;
					font-size: 30rpx;
					color: #121924;
					line-height: 40rpx;
				}

				::v-deep .uni-input-input {
					font-size: 30rpx;
					color: #585D66 !important;
				}

				::v-deep .form-item-placeholder {
					font-weight: 400;
					font-size: 30rpx;
					color: #B2B8C1;
					line-height: 40rpx;
				}


			}
		}
	}
</style>